<template>
  <div class="roleAdd addButton">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>组织管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/authority/role/list' }">角色管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色添加</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="form">
      <el-form ref="form" :model="form" label-width="100px" size="small" :rules="rules">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="form.roleName" placeholder="请输入角色名称" style="width:230px"></el-input>
        </el-form-item>
        <!--<el-form-item label="权限选择" prop="jurisdiction">-->
        <!--  <el-tree-->
        <!--    style="width:50%"-->
        <!--    :data="treeData"-->
        <!--    :default-checked-keys='defaultChecked'-->
        <!--    show-checkbox-->
        <!--    node-key="id"-->
        <!--    ref="tree"-->
        <!--    highlight-current-->
        <!--    :props="defaultProps">-->
        <!--  </el-tree>-->
        <!--</el-form-item>-->
        <el-form-item>
          <el-button style="background:#fb9654;color:#fff" @click="onSubmit">立即提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>
<script>
export default {
  mounted() {

  },
  data() {
    const validateName = (rule, value, callback) => {
      if (value == null) {
        callback(new Error("角色名称不能为空！"));
      } else if (value.replace(/(^\s*)|(\s*$)/g, "") == "") {
        callback(new Error("请输入正确的角色名称！"));
      } else {
        callback();
      }
    };
    return {
      // treeData: [],
      // defaultChecked: [],
      // defaultProps: {
      //   children: "childrenPermission",
      //   label: "menuName"
      // },
      form: {
        roleName: null,
      },
      rules: {
        roleName: [
          { required: true, trigger: "blur", validator: validateName }
        ]
      },
    };
  },
  methods: {
    // setDefaultChecked(treeData) {
    //   for (let index in treeData) {
    //     //是三级权限但默认选中的添加到默认勾选的数组中
    //     if (treeData[index].isItSelected === 1) {
    //       treeData[index].isItSelected = true;
    //       this.defaultChecked.push(treeData[index].id);
    //     } else {
    //       treeData[index].isItSelected = false;
    //     }
    //     // 递归调用
    //     if (treeData[index].childrenPermission) {
    //       this.setDefaultChecked(treeData[index].childrenPermission);
    //     }
    //   }
    //   return treeData;
    // },
    //提交添加的数据
    onSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let params = {
            name: this.form.roleName
          };
          this.$api.authority.roleAdd(params)
            .then((res) => {
              if (res.code === 200) {
                this.$message.success("添加成功!");
                this.form.roleName = "";
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style>
@import url("./add.css");
</style>
